專案啟動

這裡的啟動指的是需求進到設計，開始討論前台畫面時。
設計師們在此階段會出 Wireframe 草稿（什麼是 Wireframe？請看下一篇），幫助需求對焦。

前端工程師在此階段加入討論有很多好處，像是：

UI 設計的可行性

除了避免設計提出 👻 設計，工程師了解前端技術的最新趨勢和限制，可以提前確保技術可行性、效能（提前告知，相信設計師們一定會願意調整）。

互動的設計

這裡的互動絕不是單指一些按鈕特效，而是幫助工程師開始思考如何建構程式。像是：提前確認在什麼時機觸發功能？點選哪個按鈕打 API？

提前確保前端開發出來的設計能夠滿足需求單位和 end user 的使用。
對工程師和設計師來說絕對是雙贏 🫶

一起在 Figma 上討論吧

Figma 的檔案是一張無邊界的無限畫版，設計師可以附上任何幫助利害關係人的資訊，幫助多方確認 Wireframe（設計的草稿），如下圖。

除了 Wireframe 本身，設計師可以將：

分別標示出來（如右上圖）。由於 Figma 平台的開放和即時，即使沒有參與需求會議，工程師們也可以看到設計的調整，並利用內建的 comment 功能 做討論。
透過以上組合拳，更有效的做好前端開工前的準備！

專案前期來回反覆的設計

專案前期的確會因為業務、產品、user 端各方立場而不斷調整設計，若前端大大們能在此期間協助設計師們確認每一步，也能讓定版更順利唷！

下一篇會再詳細介紹 Wireframe 是什麼、用途，明天可以繼續看下去唷！